<template>
  <view>
    <u-sticky bgColor="#fff">
      <u-tabs :list="tabsList"
              :current="tabsCurrent"
              :is-scroll="false"
              @click="tabsClick"
              @change="tabsChange"
      ></u-tabs>
    </u-sticky>

    <view v-if="tabsCurrent === 0">
      <view v-if="listType1.length>0">
        <uni-list :border="true" v-for="(item,index) in listType1" :key="index">
          <view style="display: flex">
            <view style="width: 100%">
              <uni-list-item link @click="goToGoods(item.pmsGoods)">
                <template v-slot:header>
                  <span v-if="item.pmsGoods">{{ item.pmsGoods.title }}</span>
                  <span v-else>所有商品</span>
                </template>
                <template v-slot:footer style="margin-left: 20px">
                  <span v-if="item.walkTrendsDownloadNum.source===2">申请次数:{{
                      item.walkTrendsDownloadNum.num
                    }}</span>
                  <span v-if="item.walkTrendsDownloadNum.source===1">赠送次数:{{
                      item.walkTrendsDownloadNum.num
                    }}</span>
                </template>
              </uni-list-item>
              <uni-list-item>
                <!-- 自定义 header -->
                <template v-slot:header>
                  <view>{{ item.walkTrendsDownloadNum.addTime | time() }}</view>
                </template>
                <br>
                <template v-slot:footer style="margin-left: 20px">
              <span v-if="item.walkTrendsDownloadNum.source===2"
                    :style="item.walkTrendsDownloadNum.status===1?'color:green':'color:red'">{{
                  item.walkTrendsDownloadNum.status|statusFilter
                }}</span>


                  <span
                      v-if="item.walkTrendsDownloadNum.status===1">可用次数:{{
                      item.walkTrendsDownloadNum.useNum
                    }}</span>

                  <u-button size="mini" type="primary" v-if="item.walkTrendsDownloadNum.status===2"
                            @click.stop="checkRejectionReason(item.walkTrendsDownloadNum)">驳回原因
                  </u-button>
                  <u-button size="mini" type="primary" v-if="item.walkTrendsDownloadNum.status===0"
                            @click.stop="withdrawApply(item.walkTrendsDownloadNum)">撤回申请
                  </u-button>
                </template>
              </uni-list-item>
            </view>
            <view class="delDiv" @click="deleteItem(item.walkTrendsDownloadNum)"
                  v-if="item.walkTrendsDownloadNum.useNum===0||item.walkTrendsDownloadNum.status===2||item.walkTrendsDownloadNum.status===3">
              <u-icon name="trash"></u-icon>
            </view>
          </view>

        </uni-list>
        <u-loadmore :status="status" v-if="listType1.length>0"/>
      </view>

      <no-data :list="listType1"></no-data>

    </view>

    <view v-if="tabsCurrent === 1">
      <view v-if="listType3.length>0">
        <uni-list :border="true" v-for="(item,index) in listType3" :key="index">
          <view style="display: flex">
            <view style="width: 100%">
              <uni-list-item link @click="goToGoods(item.pmsGoods)">
                <template v-slot:header>
                  <span v-if="item.pmsGoods">{{ item.pmsGoods.title }}</span>
                  <span v-else>所有商品</span>
                </template>
                <template v-slot:footer style="margin-left: 20px">
                  <span v-if="item.walkTrendsDownloadNum.source===2">申请次数:{{
                      item.walkTrendsDownloadNum.num
                    }}</span>
                  <span v-if="item.walkTrendsDownloadNum.source===1">赠送次数:{{
                      item.walkTrendsDownloadNum.num
                    }}</span>
                </template>
              </uni-list-item>
              <uni-list-item>
                <!-- 自定义 header -->
                <template v-slot:header>
                  <view>{{ item.walkTrendsDownloadNum.addTime | time() }}</view>
                </template>
                <br>
                <template v-slot:footer style="margin-left: 20px">
              <span v-if="item.walkTrendsDownloadNum.source===2"
                    :style="item.walkTrendsDownloadNum.status===1?'color:green':'color:red'">{{
                  item.walkTrendsDownloadNum.status|statusFilter
                }}</span>


                  <span v-if="item.walkTrendsDownloadNum.status===1">可用次数:{{
                      item.walkTrendsDownloadNum.useNum
                    }}</span>
                  <u-button size="mini" type="primary" v-if="item.walkTrendsDownloadNum.status===2"
                            @click.stop="checkRejectionReason(item.walkTrendsDownloadNum)">驳回原因
                  </u-button>
                  <u-button size="mini" type="primary" v-if="item.walkTrendsDownloadNum.status===0"
                            @click.stop="withdrawApply(item.walkTrendsDownloadNum)">撤回申请
                  </u-button>
                </template>
              </uni-list-item>
            </view>
            <view class="delDiv" @click="deleteItem(item.walkTrendsDownloadNum)"
                  v-if="item.walkTrendsDownloadNum.useNum===0||item.walkTrendsDownloadNum.status===2||item.walkTrendsDownloadNum.status===3">
              <u-icon name="trash"></u-icon>
            </view>
          </view>
        </uni-list>
        <u-loadmore :status="status" v-if="listType3.length>0"/>
      </view>

      <no-data :list="listType3"></no-data>
    </view>

    <u-popup v-model="show" mode="center">
      <view>{{ currentReason }}</view>
    </u-popup>

  </view>
</template>

<script>
const API = require('../../utils/api/find.js').default;
const $ = require('../../utils/api.js');

const statusOptions = [
  {key: 0, text: ' 待审核 '},
  {key: 1, text: '审核通过'},
  {key: 2, text: '已被驳回'},
  {key: 3, text: '已撤回'}
]
const statusKeyValue = statusOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.text
  return acc
}, {})

export default {
  name: "trendsDownloadNumApply",
  data() {
    return {
      status: "",
      currentReason: "",
      show: false,
      page: 1,
      pageSize: 10,
      totalPage: 0,
      listType1: [],
      listType3: [],
      tabsList: [{
        name: "短视频素材"
      }, {
        name: '图片素材'
      }],
      tabsCurrent: 0
    }
  },

  filters: {

    statusFilter(status) {
      return statusKeyValue[status]
    }
  },
  methods: {

    deleteItem(item){
      const self = this
      uni.showModal({
        title: '提示',
        content: '确认要删除记录吗？',
        success: function (res) {
          if (res.confirm) {
            // 执行确认后的操作
            $.ajax({
              url: API.delDownloadNumByMember,
              data: {
                "id": item.id
              },
              method: 'GET',
              success(res) {
                $.$toast('删除成功');
                if (self.tabsCurrent === 0) {
                  self.getList(1)
                } else {
                  self.getList(3)
                }

              }
            })
          } else {
            // 执行取消后的操作
          }
        }
      })
    },
    goToGoods(pmsGoods) {
      if (pmsGoods) {
        $.go('/pagesA/shops/detail?id=' + pmsGoods.id);
      }
    },
    checkRejectionReason(item) {
      this.currentReason = item.reason ? item.reason : "无"
      this.show = true
    },
    withdrawApply(item) {
      const self = this
      uni.showModal({
        title: '提示',
        content: '确认要撤回申请吗？',
        success: function (res) {
          if (res.confirm) {
            // 执行确认后的操作
            $.ajax({
              url: API.editVerifyTrendsDownloadNum,
              data: {
                "id": item.id,
                "status": 3
              },
              method: 'POST',
              success(res) {
                $.$toast('撤回成功');
                if (self.tabsCurrent === 0) {
                  self.getList(1)
                } else {
                  self.getList(3)
                }

              }
            })
          } else {
            // 执行取消后的操作
          }
        }
      })
    },
    tabsClick(item) {
      console.log('item', item);
    },
    tabsChange(index) {
      this.tabsCurrent = index;
      this.status = ''
      this.page = 1
      this.totalPage = 0
      if (index === 0) {
        this.getList(1)
      } else {
        this.getList(3)
      }

    },
    getList(type) {

      const self = this;
      $.ajax({
        url: API.getVerifyTrendsDownloadNumList,
        data: {
          type: type,
          page: self.page,
          pageSize: self.pageSize
        },
        loading: true,
        method: 'GET',
        success(res) {
          if (type === 1) {
            let list = [];
            if (self.page != 1) {
              list = self.listType1.concat(res.data.list);
            } else {
              list = res.data.list ? res.data.list : [];
            }
            self.listType1 = list
          } else if (type === 3) {
            let list = [];
            if (self.page != 1) {
              list = self.listType3.concat(res.data.list);
            } else {
              list = res.data.list ? res.data.list : [];
            }
            self.listType3 = list
          }
          self.totalPage = res.data.totalPage;
          let pageNum = res.data.pageNum;
          if (pageNum == self.totalPage) {
            self.status = ''
          } else {
            self.status = 'loadmore'
          }
          uni.hideLoading(); // 加载成功后隐藏加载提示
          uni.stopPullDownRefresh();
        }
      })
    },
    init() {
      this.getList(1)

    }
  },
  onReachBottom() {
    if (this.tabsCurrent === 0) {
      if (this.page < this.totalPage) {
        this.status = 'loading'
        this.page += 1;
        this.getList(1);
      } else {
        this.status = 'nomore'
      }
    } else {
      if (this.page < this.totalPage) {
        this.status = 'loading'
        this.page += 1;
        this.getList(3);
      } else {
        this.status = 'nomore'
      }
    }

  },
  onPullDownRefresh() {
    if (this.tabsCurrent === 0) {
      this.listType1 = []
      this.page = 1
      this.getList(1)
    } else {
      this.listType3 = []
      this.page = 1
      this.getList(3)
    }
  },
  onLoad: function () {
    this.init();
  },
}
</script>

<style scoped>
.delDiv {
  width: 10%;
  background-color: #d86565;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
</style>
